import React from 'react'
import Switch from './Switch'
import Volume from './Volume'

interface Props {
  title: string
  power: boolean
  bank: boolean
  volume: number
  onPowerChange: (power: boolean) => void
  onBankChange: (bank: boolean) => void
  onVolumeChange: (volume: number) => void
}

const Controller: React.FC<Props> = (props) => {
  return (
    <div className="controller">
      <Switch value={props.power} onChange={props.onPowerChange}>power</Switch>
      <div className="title">{props.title}</div>
      <div style={{ width: '100%', padding: '0 20px' }}>
        <Volume value={props.volume} onChange={props.onVolumeChange} />
      </div>
      <Switch value={props.bank} onChange={props.onBankChange}>bank</Switch>
    </div>
  )
}

export default Controller